<template>
  <div class="training_lectyre">
    <navigate @answerBack="answerBack">培训讲座</navigate>
    <div class="lectyre_cont">
      <div class="tab_bar dis_flex just_center">
        <div
          class="item-tab tab_01 dis_flex just_center"
          :class="{ active_tab: currentTab == 1 }"
          @click="chooseTab(1)"
        >
          <span>讲座列表</span>
        </div>
        <div
          class="item-tab tab_02 dis_flex just_center"
          :class="{ active_tab: currentTab == 2 }"
          @click="chooseTab(2)"
        >
          <span>参与记录</span>
        </div>
      </div>
      <div class="search_box dis_flex">
        <searchInput
          class="search_input"
          type="text"
          v-model="form.activityName"
          placeholder="搜索活动名称"
          @input="handleSearch"
          @clearInput="clearInput"
        ></searchInput>
        <div class="dis_flex" @click="isShowFilterPop = true">
          <span class="filtrate_txt">筛选</span>
          <img
            src="@/assets/images/evaluate/filtrate_icon.png"
            alt=""
            class="filtrate_img"
          />
        </div>
      </div>
      <!-- 列表 -->
      <div class="lectyre_list">
        <div class="item_lectyre" v-for="(item, index) in list" :key="index">
          <div class="item_theme">
            主题：{{ currentTab == 1 ? item.name : item.task_name }}
          </div>
          <div class="line"></div>
          <div class="item_info dis_flex" v-if="currentTab == 1">
            <div>当前状态：{{ getStatus(item.status) }}</div>
            <div>培训类型：{{ item.type_name }}</div>
            <div>教材分类：{{ item.textbook_type_name }}</div>
            <div>培训讲师：{{ item.lecturer_name }}</div>
          </div>
          <div class="item_info dis_flex" v-if="currentTab == 2">
            <div>教材分类：{{ item.task_textbook_type_name }}</div>
            <div>培训类型：{{ item.task_type_name }}</div>
            <div>培训讲师：{{ item.task_lecturer_name }}</div>
            <div>参与评论：{{ item.is_learning == 1 ? "是" : "否" }}</div>
            <div>
              前置测评任务：{{
                item.task_task_type == 1 || item.task_task_type == 3
                  ? "有"
                  : "无"
              }}
            </div>
            <div>
              报名需要审核：{{ item.task_review == 1 ? "需要" : "不需要" }}
            </div>
            <div>
              课后测评任务：{{
                item.task_task_type == 2 || item.task_task_type == 3
                  ? "有"
                  : "无"
              }}
            </div>
            <div>报名审核结果:{{ getAuditStatus(item.audit_status) }}</div>
          </div>
          <div class="item-cont">
            <img
              :src="
                item.textbook_cover
                  ? item.textbook_cover
                  : item.task_textbook_cover
              "
              alt=""
              class="item_img"
            />
            <div class="item_desc">
              {{
                item.textbook_name
                  ? item.textbook_name
                  : item.task_textbook_name
              }}
            </div>
          </div>
          <div class="item_time" v-if="currentTab == 1">
            时间：{{ convertTimestampToDateTime(item.start_time) }} --
            {{ convertTimestampToDateTime(item.end_time) }}
          </div>
          <div class="line"></div>
          <div class="item_btn dis_flex" v-if="currentTab == 1">
            <!-- <div class="btn btn_01">预览课件</div> -->
            <div
              class="btn btn_02"
              @click="toDetailsPage(item.id, 'lecturedetails')"
            >
              我要报名
            </div>
          </div>
          <div
            class="item_btn participation_btn dis_flex"
            v-if="currentTab == 2"
          >
            <div class="current_state">
              当前状态：{{ getStatus(item.task_status) }}
            </div>
            <div class="dis_flex">
              <div class="btn btn_01" @click="toApply(item)">
                {{ item.leave_status == 1 ? "已请假" : "申请请假" }}
              </div>
              <div
                class="btn btn_02"
                @click="toDetailsPage(item.id, 'historicalDetails')"
              >
                查看详情
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="no_data_txt">--- 无更多培训讲座了 ---</div>
    </div>

    <!-- 筛选 -->
    <filterPop
      :isShowFilterPop="isShowFilterPop"
      @getFilterInfo="getFilterInfo"
    />
  </div>
</template>

<script>
import searchInput from "@/components/searchInput/index.vue";
import filterPop from "./components/filterPop.vue";
import { convertTimestampToDateTime } from "@/utils/time.js";
import { trainingList, trainingLog } from "@/api/funcation/training.js";

export default {
  data() {
    return {
      currentTab: this.$route.query.currentTab || 1,
      isShowFilterPop: false,
      form: {
        pageSize: 10,
        page: 1,
      },
      list: [],
    };
  },
  components: { searchInput, filterPop },
  created() {
    this.currentTab == 1 ? this.getList() : this.getLog();
  },
  computed: {
    getStatus() {
      return (ss) => {
        if (ss == 1) return "报名中";
        if (ss == 2) return "培训中";
        if (ss == 3) return "已结束";
      };
    },
    getAuditStatus() {
      return (ss) => {
        if (ss == 1) return "审核中";
        if (ss == 2) return "已允许";
        if (ss == 3) return "已拒绝";
      };
    },
  },
  methods: {
    convertTimestampToDateTime,
    async getList() {
      let param = {
        pageSize: this.form.pageSize,
        page: this.form.page,
        lecturer_id: this.form.lecturerId,
        type_id: this.form.lecturerTypeId,
        name: this.form.activityName,
      };
      let { data } = await trainingList(param);
      this.list = data.data;
    },
    async getLog() {
      let param = {
        pageSize: this.form.pageSize,
        page: this.form.page,
        lecturer_id: this.form.lecturerId,
        type_id: this.form.lecturerTypeId,
        name: this.form.activityName,
      };
      let { data } = await trainingLog(param);
      this.list = data.data;
    },
    chooseTab(v) {
      this.currentTab = v;
      this.from = {
        pageSize: 10,
        page: 1,
      };
      this.list = [];
      this.$router.push({
        path: this.$route.path,
        query: {
          currentTab: v,
        },
      });
      this.currentTab == 1 ? this.getList() : this.getLog();
    },
    getFilterInfo(val) {
      this.isShowFilterPop = false;
      this.form = { ...this.form, ...val };
      this.list = [];
      this.currentTab == 1 ? this.getList() : this.getLog();
    },
    toDetailsPage(id, name) {
      this.$router.push({ query: { id: id }, name: name });
    },
    toApply(item) {
      let info = {
        id: item.id,
        isApply: item.leave_status,
        submitPerson: item.task_user_name,
        leaveReason: item.leave_reason,
        type: 1,
      };
      this.$router.push(`/applyVacate?info=${JSON.stringify(info)}`);
    },
    answerBack() {
      this.$router.push({ path: "/nav/functionCenter" });
    },
    handleSearch(e) {
      this.form.activityName = e;
      this.currentTab == 1 ? this.getList() : this.getLog();
    },
    clearInput() {
      this.form.activityName = "";
      this.currentTab == 1 ? this.getList() : this.getLog();
    },
  },
};
</script>

<style lang="less" scoped>
.dis_flex {
  display: flex;
  align-items: center;
}

.just_center {
  justify-content: center;
}

.training_lectyre {
  background-color: #f4f6fa;
  color: #333333;
}

.lectyre_cont {
  padding: 10px 10px 0 10px;
}

//切换
.tab_bar {
}

.item-tab {
  width: 163.33px;
  height: 33.33px;
  line-height: 33.33px;
  background: #fff;
}

.tab_01 {
  border-radius: 6.67px 0 0 6.67px;
}

.tab_02 {
  border-radius: 0px 6.67px 6.67px 0px;
}

.active_tab {
  background: linear-gradient(0deg, #ffffff -20%, rgba(255, 255, 255, 0) 20%),
    #00aeff;
  color: #fff;
}

.item-tab img {
  width: 16.67px;
  height: 16.67px;
  margin-right: 9.67px;
}

.item-tab span {
  font-size: 14.67px;
  line-height: 14.67px;
  font-weight: bold;
}

//列表

.item_lectyre {
  background: #ffffff;
  border-radius: 6.67px;
  padding: 13.67px 10px 10px 10px;
  margin-bottom: 10px;

  &:first-child {
    border-radius: 0 0 6.67px 6.67px;
  }
}

.item_theme {
  color: #000000;
  line-height: 24px;
  font-size: 16.67px;
  font-weight: bold;
}

.line {
  border-bottom: 0.33px solid #333333;
  opacity: 0.2;
  margin: 13.33px 0 6.67px;
}

.item_info,
.item_time,
.item_desc {
  color: #777777;
  font-size: 12px;
  line-height: 12px;
}

.item_info {
  flex-wrap: wrap;
}

.item_info div {
  width: 50%;
  line-height: 22px;
}

.item-cont {
  display: flex;
  margin: 10px 0 14.33px;
}

.item_img {
  width: 118.67px;
  height: 66.67px;
  margin-right: 9.33px;
}

.item_desc {
  line-height: 16px;
}

.item_time {
  color: #666666;
}

.item_btn {
  justify-content: end;
}

.btn {
  width: 80px;
  height: 33.33px;
  line-height: 33.33px;
  text-align: center;
  background: linear-gradient(0deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%),
    #0aa7f4;
  border-radius: 6.67px;
  font-size: 12.67px;
}

.btn_01 {
  margin-right: 6.67px;
  background: #ffffff;
  border: 0.33px solid #999999;
  color: #333333;
}

.btn_02 {
  color: #ffffff;
  background: linear-gradient(0deg, #ffffff -20%, rgba(255, 255, 255, 0) 20%),
    #00aeff;
}

.no_data_txt {
  color: #777777;
  font-size: 14px;
  text-align: center;
  margin: 32px 0 65px;
}

.participation_btn {
  justify-content: space-between;
}

.current_state {
  font-size: 12px;
}

.search_box {
  height: 46.67px;
  line-height: 46.67px;
  padding: 0 10px;
  background: #ffff;
  margin-top: 10px;
  border-radius: 6.67px 6.67px 0 0;
}

.search_input {
  border: 0;
  width: 263.33px;
  height: 33.33px;
  background: #f4f6fa;
  border-radius: 6.67px;
  margin: 0;
}

.filtrate_txt {
  font-size: 14px;
  color: #333333;
  margin: 0 7px 0 10px;
}

.filtrate_img {
  width: 12px;
  height: 13.33px;
}
</style>
